<template>
	<div style="width: 100%; height: 100%;">
		<!-- 地图 -->
		<div class="map_div">
			<baidu-map style="width: 100%; height: 100%;"
				:center="center" 
				:zoom="zoom"
				scroll-wheel-zoom="true">
				
				<!-- 标记点 -->
				<bm-marker 
					:position="housePoint" 
					:dragging="true" 
					animation="BMAP_ANIMATION_BOUNCE">
				</bm-marker>
				
			</baidu-map>
		</div>
		
		<!-- 搜索区域 -->
		<div class="search_div">
			<div style="display: flex;">
				<el-input v-model="form.keyword" placeholder="输入关键词/城市/小区" style="margin-right: 20px;"></el-input>
				<el-button type="primary" @click="search()">搜索</el-button>
			</div>
			<div style="display: flex; margin-top: 10px; justify-content: space-between; align-items: center;">
				几室 <el-input style="width: 120px;" v-model="form.jishi"></el-input>
				几厅 <el-input style="width: 120px;" v-model="form.jiting"></el-input>
				价格区间(万元) <el-input style="width: 120px;" v-model="form.minPrice"/> - <el-input style="width: 120px;" v-model="form.maxPrice"/>
			</div>
		</div>
		
		<!-- 搜索结果列表 -->
		<el-drawer
		  title="搜索结果"
		  style="padding: 20px; box-sizing: border-box;"
		  :visible.sync="drawer"
		  :with-header="false">
		  
		  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; overflow: auto;">
			  <!-- 房屋信息 -->
			  <div class="house_div" v-for="house in houses" @click="showHouseMark(house.lat, house.lng)">
				  <div class="left_div">
					  <img :src="'http://localhost:8888/file/download?fileName=' + house.image" style="background-color: aquamarine; width: 200px; height: 100%;"/>
				  </div>
				  <div class="right_div">
					  <div style="font-size: 20px; font-weight: 900;">{{house.subject}}</div>
					  <div style="font-size: 12px; color: gray;">{{house.info}}</div>
					  <div>{{house.jishi}}室{{house.jiting}}厅</div>
					  <div>{{house.xiaoqu}}</div>
					  <div style="align-self: flex-end; font-weight: 900; color: red;">￥{{house.price}}万元</div>
				  </div>
			  </div>
			 
		  </div>
		  
		</el-drawer>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				drawer: false,
				center: "深圳市",
				zoom: 12,
				form: {
					keyword: "",
					jishi: "",
					jiting: "",
					minPrice: "",
					maxPrice: ""
				},
				//房屋信息列表
				houses: [],
				//房屋位置
				housePoint: {}
			}
		},
		methods:{
			//搜索房屋信息
			search(){
				
				//发送ajax请求后端的数据
				this.axios({
					method: "POST",
					url: "http://localhost:8888/house/search",
					data: this.form
				}).then((result) => {
					console.log("搜索的结果：", result.data);
					//房屋信息的列表
					this.houses = result.data;
					//弹出右边的边框
					this.drawer = true;
				});
			},
			//展示房屋的位置信息
			showHouseMark(lat, lng){
				var point = {
					lat: lat,
					lng: lng
				}
				//给到mark标记
				this.housePoint = point;
				//改变地图的中心店
				this.center = point;
				//改变地图的缩放
				this.zoom = 19;
			}
		}
	}
</script>

<style>
	.map_div {
		width: 100%;
		height: 100%;
		background-color: aquamarine;
	}
	
	.search_div {
		width: 700px;
		height: 120px;
		background-color: white;
		position: fixed;/*固定定位*/
		top: 10px;
		left: 10px;
		border-radius: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		/* opacity: 0.8; */
		padding: 10px;
		box-sizing: border-box;
	}
	
	.house_div {
		width: 100%;
		height: 200px;
		margin-bottom: 10px;
		border-radius: 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		display: flex;
		overflow: hidden;
	}
	
	.left_div{
		height: 100%;
	}
	
	.right_div {
		flex-grow: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: flex-start;
		padding: 10px 20px;
		box-sizing: border-box;
	}
	
</style>